<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>视频分享</title>
    <link rel="stylesheet" th:href="@{/css/index.css}" />
    <script type="application/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
    <script>
        $(document).ready(function () {
            $("#myForm").submit(function () {
                var name=$("#name").val()
                var video=$("#video").val()
                if (name.length==0){
                    $("#ErrorName").html("名字不能为空!")
                    return false
                }
                $("#ErrorName").html("")
                if (video.length==0){
                    $("#ErrorVideo").html("请选择视频!")
                    return false
                }
                $("#ErrorVideo").html("")
            })
        })
    </script>
</head>
<body>
<div
        class="v3-app-layout layoutstatus-header--Normal layoutstatus-side--Hidden limitWidth">
    <div th:replace="header :: #header"></div>
    <div class="v3-app-layout__content">
        <div class="UserCenter">
            <div class="UserCenter__tab">
                <h4 class="UserCenter__tab-title">个人中心</h4>
                <div th:replace="left :: #left"></div>
            </div>
            <div class="UserCenter__content">
                <div class="UserCenter__setting">
                    <div class="compoent-sortTabs__container UserCenter__Setting__tab">
                        <div class="compoent-sortTabs__tabItemWrapper first">
                            <div class="compoent-sortTabs__tabItem active first">
                                <span>视频分享</span>
                                <div class="ink"></div>
                            </div>
                        </div>
                        <div class="compoent-sortTabs__appendNode"></div>
                    </div>
                    <div class="UserCenter__setting__content">
                        <div class="UserCenter__profile">
                            <div class="UserCenter__profile__content">
                                <div class="UserCenter__profile__right">
                                    <form id="myForm" action="/video/addVideo" method="post" enctype="multipart/form-data">
                                        <div class="UserCenter__profile__item">
                                            <div class="UserCenter__profile__item-wrapper">
                                                <div class="UserCenter__profile__item-field">类别</div>
                                                <div class="UserCenter__profile__item-value">
                                                <span class="UserCenter__profile__item-value-inner">
                                                    <select name="categoryId" id="categoryId">
                                                        <option th:value="${category.id}" th:text="${category.name}" th:each="category,index:${categories}"  th:selected="${index.count}==1"></option>
                                                    </select>
                                                </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="UserCenter__profile__item">
                                            <div class="UserCenter__profile__item-wrapper">
                                                <div class="UserCenter__profile__item-field">标题</div>
                                                <div><input type="text" id="name" name="name"></div>
                                                <div style="color: red" id="ErrorName"></div>
                                            </div>
                                        </div>
                                        <div class="UserCenter__profile__item">
                                            <div class="UserCenter__profile__item-wrapper">
                                                <div class="UserCenter__profile__item-field">封面</div>
                                                <div><input type="file" name="videoCover" accept="image/*"></div>
                                            </div>
                                        </div>
                                        <div class="UserCenter__profile__item">
                                            <div class="UserCenter__profile__item-wrapper">
                                                <div class="UserCenter__profile__item-field">视频</div>
                                                <div><input type="file" id="video" name="videoFile" accept="video/*"></div>
                                                <div style="color: red" id="ErrorVideo"></div>
                                            </div>
                                        </div>
                                        <div class="UserCenter__profile__item">
                                            <div class="UserCenter__profile__item-wrapper">
                                                <div>
                                                    <button class="form-button btn-active">上传</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>